<template>
	<div class="skill-page">
		<!-- 技能列表 -->
		<div class="skill-list">
			<!-- 列表头部 -->
			<div class="list-header">
				<div class="header-item name-header">技能名称</div>
				<div class="header-item time-header">创建时间</div>
				<div class="header-item count-header">子技能</div>
			</div>

			<div v-for="(item, index) in mySkillList" :key="index">
				<div class="skill-item"  @click="goToDetail($event , item)">
					<div class="skill-name">
						<i class="icon skill-icon"></i>
						<span>{{item.className}}</span>
					</div>
					<div class="create-time">{{item.createTime}}</div>
					<div class="subskill-count">
						<span class="count-badge">{{item.children.length}}</span>
					</div>
				</div>
				<div class="operation">
					<span style="color:red" @click="del(item)">删除</span>
					<span style="color:#42B983" @click="edit(item)">修改</span>
				</div>
			</div>
		</div>

		<!-- 底部添加按钮 -->
		<button class="add-skill-btn" @click="addClass">
			<i class="icon add-icon"></i>
			<span>添加技能</span>
		</button>

		<van-popup :show="isAddSkillClassShow" @close="isAddSkillClassShow = false" position="top"
			custom-style="box-sizing: border-box;height: auto; border-radius: 0 0 16px 16px ; padding-bottom: env(safe-area-inset-bottom);">
			<view class="popup-wrapper">
				<div class="popup-header">
					<h3>添加技能分类</h3>
				</div>

				<!-- 输入区域 -->
				<div class="input-container">
					<input type="text" v-model="className" placeholder="请输入技能分类名称" class="skill-input" autofocus
						maxlength="8" />
					<p class="input-hint" v-if="className.length > 0">
						{{ className.length }}/8
					</p>
				</div>

				<!-- 操作按钮 -->
				<div class="popup-actions">
					<button class="submit-btn" @click="addSave">
						添加分类
					</button>
				</div>
			</view>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isAddSkillClassShow: false,
				className: '',
				id:"",
				mySkillList: []
			}
		},
		
		onShow() {
			this.getInit()
			console.log(uni.getStorageSync('userInfo') , 'aaaa');
		},

		methods: {
			async getInit() {
				let result = await this.$axios('mySkill', {
					queryId:uni.getStorageSync('userInfo')._id
				} , true)
				if (result.code == 200) {
					this.mySkillList = result.data || []
				}
			},

			addClass() {
				this.className = '';
				this.id = ""
				this.isAddSkillClassShow = true;
			},
			
			goToDetail(e , item){
				this.$router(`/subPackages1/pages/mySkill/childrenList?classId=${item._id}`)
			},
			
			del(item){
				let _this = this
				uni.showModal({
					title: "提示",
					content: "确定要删除这个技能吗？",
					success: async function(res) {
						if (res.confirm) {
							let parmse = {
								...item,
								state: "delete",
								databaseName: 'mySkill',
							};
							let res = await _this.$axios("overallSituation", parmse)
							if (res.code == 200) {
								_this.getInit();
								_this.$showToast('删除成功')
							}
						}
					},
				});
			},
			
			edit(item){
				this.className = item.className
				this.id = item._id
				this.isAddSkillClassShow = true;
			},

			async addSave() {
				// 保存逻辑可以在这里实现
				if (!this.className) {
					this.$showToast("请输入分类名称")
					return
				}

				let parmse = {
					state: this.id ? 'update' : 'add',
					className: this.className,
					databaseName: 'mySkill',
					createTime: this.$getTime('yyyy-MM-DD'),
					queryId:uni.getStorageSync('userInfo')._id
				}

				let result = await this.$axios('overallSituation', parmse)
				if (result.code == 200) {
					this.getInit()
					this.isAddSkillClassShow = false
				}
			}
		}
	}
</script>

<style>
	/* 基础样式设置 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.skill-page {
		height: 89vh;
		overflow-y: auto;
		background-color: #f5f5f7;
		box-sizing: border-box;
	}

	/* 页面标题 */
	.page-header {
		background-color: #fff;
		padding: 16px 20px;
		border-bottom: 1px solid #e0e0e0;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.page-header h1 {
		font-size: 18px;
		color: #333;
		font-weight: 600;
	}

	/* 技能列表 */
	.skill-list {
		margin-top: 10px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	/* 列表头部 */
	.list-header {
		display: flex;
		padding: 12px 20px;
		background-color: #f9f9f9;
		border-bottom: 1px solid #e0e0e0;
	}

	.header-item {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.name-header {
		flex: 2;
	}

	.time-header {
		flex: 2;
	}

	.count-header {
		flex: 1;
		text-align: center;
	}

	/* 列表项 */
	.skill-item {
		display: flex;
		align-items: center;
		padding: 15px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #f0f0f0;
		transition: background-color 0.2s;
	}

	.skill-item:last-child {
		border-bottom: none;
	}

	.skill-item:hover {
		background-color: #fafafa;
	}

	.skill-name {
		flex: 2;
		display: flex;
		align-items: center;
	}

	.icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-right: 10px;
		border-radius: 4px;
	}

	.skill-icon {
		background-color: #42b983;
		position: relative;
	}

	.skill-icon::after {
		content: '✦';
		position: absolute;
		color: white;
		font-size: 16px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.skill-name span {
		font-size: 16px;
		color: #333;
	}

	.create-time {
		flex: 2;
		font-size: 14px;
		color: #666;
	}

	.subskill-count {
		flex: 1;
		text-align: center;
	}

	.count-badge {
		display: inline-block;
		min-width: 24px;
		height: 24px;
		line-height: 24px;
		background-color: #e8f5e9;
		color: #43a047;
		font-size: 13px;
		border-radius: 12px;
		padding: 0 6px;
	}

	/* 添加技能按钮 */
	.add-skill-btn {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 50px;
		background-color: #42b983;
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
		transition: background-color 0.2s, transform 0.2s;
	}

	.add-skill-btn:hover {
		background-color: #359e75;
		transform: translateX(-50%) scale(1.02);
	}

	.add-icon {
		width: 20px;
		height: 20px;
		margin-right: 8px;
		position: relative;
	}

	.add-icon::after {
		content: '+';
		position: absolute;
		color: white;
		font-size: 20px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 弹窗样式优化 */
	.popup-wrapper {
		background-color: #fff;
	}

	/* 弹窗头部 */
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px 20px;
		position: relative;
		border-bottom: 1px solid #f0f0f0;
	}

	.popup-header h3 {
		font-size: 18px;
		color: #333;
		font-weight: 600;
	}

	.close-btn {
		position: absolute;
		right: 20px;
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		position: relative;
	}

	.close-icon::before,
	.close-icon::after {
		content: '';
		position: absolute;
		width: 2px;
		height: 16px;
		background-color: #999;
		top: 50%;
		left: 50%;
	}

	.close-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.close-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* 输入区域样式 */
	.input-container {
		padding: 20px;
		box-sizing: border-box;
	}

	.skill-input {
		width: 100%;
		height: 48px;
		padding: 0 16px;
		box-sizing: border-box;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 16px;
		color: #333;
		outline: none;
		transition: border-color 0.2s;
	}

	.skill-input::placeholder {
		color: #c9c9c9;
	}

	.skill-input:focus {
		border-color: #42b983;
	}

	.input-hint {
		font-size: 14px;
		color: #999;
		text-align: right;
		margin-top: 8px;
	}

	/* 弹窗按钮区域 */
	.popup-actions {
		padding: 0 20px 20px;
	}

	.submit-btn {
		width: 100%;
		height: 48px;
		background-color: #359e75;
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		transition: background-color 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 适配不同屏幕尺寸 */
	@media (max-width: 375px) {

		.skill-name span,
		.create-time {
			font-size: 14px;
		}

		.add-skill-btn {
			height: 46px;
			font-size: 15px;
		}

		.popup-header h3 {
			font-size: 17px;
		}

		.skill-input,
		.submit-btn {
			height: 44px;
			font-size: 15px;
		}
	}
	
	.operation {
		padding: 10px 20px;
		box-sizing: border-box;
	}
	
	.operation span {
		margin-right: 10px;
		font-size: 14px;
	}
</style>